<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>
    
    <script src="http://www.google.com/jsapi?key=ABQIAAAA-W9uqIa2PP530F8zDw7ifhRzWAkh1BJXTJPjs-VxE17765CtzxTMrSE7KOShOGqhmxrFQXXL8tipng"
      type="text/javascript"></script>

    <script type="text/javascript">

var zoom = 14;
var map;

function load() {
  if (GBrowserIsCompatible()) {
	geocoder = new GClientGeocoder();
	if (FORM_DATA["zip"]) {
		geocoder.getLatLng(FORM_DATA["zip"], function(thePoint) {
			zoom = 14;
			displayMap(thePoint);
		});	
	} else if (FORM_DATA["city"] && FORM_DATA["state"]) {
		geocoder.getLatLng(FORM_DATA["city"] + ", " + FORM_DATA["state"] + ", United States", function(thePoint) {
			zoom = 10;
			displayMap(thePoint);
		});
	} else if (FORM_DATA["state"]) {
		geocoder.getLatLng(FORM_DATA["state"] + ", United States", function(thePoint) {
			zoom = 7;
			displayMap(thePoint);
		});
	} else {
		zoom = 10;
	 	thePoint = null;
	 	if (google.loader.ClientLocation.latitude && google.loader.ClientLocation.longitude) {
	 		thePoint = new GLatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude)
	 	}
		displayMap(thePoint);
	}
  }
}

function displayMap(point) {
	map = new GMap2(document.getElementById("congressional_map"), {"draggableCursor":"pointer"});
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());

	GEvent.addListener(map,"click", function(overlay, latlng) {     
		if (latlng) { 
			getDistrict(latlng);
		}
	});

	var WMS_URL = 'http://www.govtrack.us/perl/wms-cd.cgi?';
	var G_MAP_LAYER_FILLED = createWMSTileLayer(WMS_URL, "cd-filled", null, "image/gif", null, null, null, .25);
	var G_MAP_LAYER_OUTLINES = createWMSTileLayer(WMS_URL, "cd-outline", null, "image/gif", null, null, null, .66, "Data from GovTrack.us");
	var G_MAP_OVERLAY = createWMSOverlayMapType([G_NORMAL_MAP.getTileLayers()[0], G_MAP_LAYER_FILLED, G_MAP_LAYER_OUTLINES], "Overlay");
	map.addMapType(G_MAP_OVERLAY);
	map.setMapType(G_MAP_OVERLAY);
	if (point == null) {
		map.setCenter(new GLatLng(39, -96), 4);
	} else {
		map.setCenter(point, zoom);
	}
	
}

function getDistrict(latlng) {
   	$("#district_results").empty();
   	FORM_DATA.latitude = latlng.lat();
   	FORM_DATA.longitude = latlng.lng();
	$.post(LOCATION_SERVICE, FORM_DATA, function (data) { printDistrictResults(data); }, "json");
	$("<h3>looking up your district... one moment please...</h3>").appendTo("#district_results");	
}

function printDistrictResults(obj) {
	str = "<h3>There was an error. Please try again.</h3>";
	if (obj != null) {
		if (obj.result == "ok") {
			if (obj.district) {
				str = "<table><tr><td colspan='3'>You have chosen ";
				if ((obj.district.district != "0") && (obj.district.district != "00")) {
					str += "District " + obj.district.district + " in ";
				}
				str += obj.district.state + ".<br/>You are now RepresentedBy</td></tr><tr><td valign='top'>";
				if (obj.district.rep) {
					str += "<table><tr><td width=\"48\"><img src=\"http://representedby.appspot.com/includes/photos/40x50/" + obj.district.rep.id + ".jpg\" /></td></tr>";
					str += "<tr><td width=\"50\"><a target='_top' href=\"http://apps.facebook.com/representedby/legislator?id=" + obj.district.rep.id + "\">" + obj.district.rep.name + "</a></td></tr></table>";
				} 
				str += "</td><td valign='top'>";
				if (obj.district.jrsen) {
					str += "<table><tr><td width=\"48\"><img src=\"http://representedby.appspot.com/includes/photos/40x50/" + obj.district.jrsen.id + ".jpg\" /></td></tr>";
					str += "<tr><td width=\"50\"><a target='_top' href=\"http://apps.facebook.com/representedby/legislator?id=" + obj.district.jrsen.id + "\">" + obj.district.jrsen.name + "</a></td></tr></table>";
				}
				str += "</td><td valign='top'>";
				if (obj.district.srsen) {
					str += "<table><tr><td width=\"48\"><img src=\"http://representedby.appspot.com/includes/photos/40x50/" + obj.district.srsen.id + ".jpg\" /></td></tr>";
					str += "<tr><td width=\"50\"><a target='_top' href=\"http://apps.facebook.com/representedby/legislator?id=" + obj.district.srsen.id + "\">" + obj.district.srsen.name + "</a></td></tr></table>";
				}
				str += "</td></tr><tr><td colspan='3'><a target='_top' href='http://apps.facebook.com/representedby/'>See what your legislators are up to</a></td></tr></table>";
			}
		} else {
			str = "<h3>" + obj.message + "</h3>";
		}
	}
	$("#district_results").empty();
	$(str).appendTo("#district_results");
	window.scrollTo(0,400);
}

google.load("maps", "2");
google.load("jquery", "1");
</script>
<script src="gmap-wms.js"></script>
<script>
	
var FORM_DATA = createRequestObject();
var LOCATION_SERVICE = "/fb/updatelocation";

</script>
<link href="http://representedby.appspot.com/includes/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="fbbody" onload="load()" onunload="GUnload()">
  	<div id="container" style="width:732px">
	<h2>Click on your Congressional District</h2>
    <div id="congressional_map" style="width:730px;height:400px"></div>
	<div id="district_results"></div>
	</div>
  </body>
</html>
